<template>
	<view class="out">
		<!-- <input @input="e => iptValue = e.detail.value" :type="text" :value="value" @focus="onFocus" @blur="onBlur" /> -->
		<input type="text" v-model="iptValue"
		@confirm="onConfirm"
		/>
		<image src="/static/chicken.gif" mode="" class="pic"></image>
	</view>
	
	<view class="">
		预览：{{iptValue}}
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const text=ref("text");
	const value= ref("输入文字");
	const iptValue = ref("")
	
	// function onInput(e){
	// 	console.log(e.detail.value);
	// 	iptValue.value = e.detail.value;
	// };
		
	function onFocus(e){
		console.log(e);
	};
	
	function onConfirm(e){
		console.log(e);
	};

</script>

<style lang="scss" scoped>
	.out{
		padding: 0 20px;
		margin-top: 40px;
		input{
			border: 1px solid red;
			position: relative;
			z-index: 2;
			background-color: blue;
		}
	}
	.pic{
		z-index: 1;
		width: 24px;
		height: 24px;
		position: absolute;
		top: -24;
		left: 0;
	}
</style>
